import SwiftUI struct MapOpportunities: View { let mapSize: CGSize let lineWidth: CGFloat let vertexSize: CGSize let opportunities: [Opportunity] let arrowheadSize = CGFloat(10.0) var body: some View { ForEach(opportunities, id: \.id) { edge in Path { path in // First we transform edges from percentage to map coordinates let origin = CGPoint(x: w(edge.origin.x), y: h(edge.origin.y)) let destination = CGPoint(x: w(edge.destination.x), y: h(edge.destination.y)) let multiplier = CGFloat(edge.destination.x > edge.origin.x ? 1.0 : -1.0) let upperAngle = -CGFloat.pi / 4.0 let lowerAngle = CGFloat.pi / 4.0 let offsetOrigin = CGPoint(x: origin.x + multiplier * (vertexSize.width / 2.0), y: origin.y) let offsetDestination = CGPoint( x: destination.x - multiplier * (vertexSize.width / 2.0), y: destination.y) path.move(to: offsetOrigin) path.addLine(to: offsetDestination) path.move(to: offsetDestination) path.addLine( to: CGPoint( x: offsetDestination.x - multiplier * arrowheadSize * cos(upperAngle), y: offsetDestination.y - multiplier * arrowheadSize * sin(upperAngle))) path.move(to: offsetDestination) path.addLine( to: CGPoint( x: offsetDestination.x - multiplier * arrowheadSize * cos(lowerAngle), y: offsetDestination.y - multiplier * arrowheadSize * sin(lowerAngle))) path.move(to: offsetDestination) path.closeSubpath() }.applying( CGAffineTransform(translationX: vertexSize.width / 2.0, y: vertexSize.height / 2.0) ).strokedPath(StrokeStyle(lineWidth: lineWidth / 4, dash: [10.0])).stroke( Color.map.opportunityColor) } } func h(_ dimension: CGFloat) -> CGFloat { max(0.0, min(mapSize.height, dimension * mapSize.height / 100.0)) } func w(_ dimension: CGFloat) -> CGFloat { max(0.0, min(mapSize.width, dimension * mapSize.width / 100.0)) } } #Preview { MapOpportunities( mapSize: CGSize(width: 400.0, height: 400.0), lineWidth: 1.0, vertexSize: CGSize(width: 25.0, height: 25.0), opportunities: [ Opportunity(id: 1, origin: CGPoint(x: 2.0, y: 34.0), destination: CGPoint(x: 23.0, y: 76.2)) ]) }